<template>
    <div class="list" ref="wrapper">
        <!--为了插件 结构调整-->
        <div>
            <div class="area ">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list clear">
                    <div class="button-wrap">
                        <div class="button" @click="handleCityClick(currentc)">{{this.currentCity}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list clear">
                    <div class="button-wrap"
                         v-for="item of hot"
                         :key="item.id"
                         @click="handleCityClick(item.name)"
                    >
                        <div class="button">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="area"
                 v-for="(item,key,index) of cities"
                 :key="key"
                 :ref="key"
            >
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list"
                     v-for="items_in of item"
                     :key="items_in.id"
                     @click="handleCityClick(items_in.name)"
                >
                    <div class="item border-bottom">{{items_in.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import {mapState,mapMutations} from 'vuex'

    export default {
        name: "list",
        props:{
            cities:Object,
            hot:Array,
            letter:Object
        },
        data () {
          return {
              orign_city:''
          }
        },
        computed :{
            // ...是展开符
            // 我想把vuex里面的city的数据映射到计算属性里，映射过来的名字是currentCity
            ...mapState({
                currentCity:'city'
            })
        },
        mounted () {
            const click_options = {
                click: true,
                taps: true

            }
            this.scroll = new BScroll(this.$refs.wrapper,click_options);
            this.currentc=this.currentCity;
        },
        watch:{
            letter () {
                if(this.letter){
                    // console.log(this.letter.name)
                    // 加[0] 是因为如果是循环创建的：ref ，$refs[xxx]得到的是一个数组
                    const element=this.$refs[this.letter.name][0]
                    // console.log(element)
                    this.scroll.scrollToElement(element)
                }
            }
        },
        methods:{
            handleCityClick (city) {
                // changeCity这样的Action，派发一个名字是changeCity的事件
                // 但是vuex在创建store的时候并没有这个事件
                // this.$store.dispatch('changeCity',city)
                // 直接调用
                // this.$store.commit('changeCity',city)
                //优化代码 将vuex里面的mutations方法映射到组件
                this.changeCity(city)
                // 跳转到首页
                this.$router.push('/');
                // alert(city)
            },
            // 我们vuex里面有个mutations方法，我把它映射到 组件的方法里，名字是changeCity
            ...mapMutations(['changeCity'])
        }
    }
</script>

<style lang="stylus" scoped>
@import "~styles/variables.styl"
.list
    position: absolute
    right: 0
    left:0
    bottom:0
    top:1.58rem
    /*background: red*/
    overflow hidden
.title
    line-height:.54rem
    font-size:.26rem
    background: #eee
    padding:0 0 0 0.2rem
    color: #666
.border-topbottom
    &:before
        border-color: #ccc
    &:after
        border-color: #ccc
.button-list
    padding:0.1rem 0.6rem 0.1rem 0.1rem
.button-wrap
    float left
    width: 33.33%
.button
    margin:0.1rem
    padding:0.1rem 0rem
    -webkit-border-radius: 0.06rem
    -moz-border-radius: 0.06rem
    border-radius:0.06rem
    text-align center
    border:0.02rem solid #ccc
.item-list .item
    line-height 0.76rem
    color: #666
    padding-left:.2rem
.border-bottom
    &:before
        border-color: #ccc
</style>